<template>
	<view class="container">
		<view class="list">
			<view class="title">交易记录</view>

			<view class="item" v-for="(item, i) in recordList" :key="i">
				<view class="first" v-if="item.type == 1">
					<view class="sub-title">充值记录</view>
                    <view class="status">充值成功</view>
				</view>
                <view class="first" v-if="item.type == 2 && item.deduction_type == 1">
                    <view class="sub-title">线上支付</view>
                    <view class="status1">支付成功</view>
                </view>
                <view class="first" v-if="item.type == 2 && item.deduction_type == 2">
                    <view class="sub-title">线下支付</view>
                    <view class="status1">支付成功</view>
                </view>
                <view class="first" v-if="item.type == 3">
                    <view class="sub-title">退款</view>
                    <view class="status">退款成功</view>
                </view>

				<view class="second">
					<view class="date">{{ item.created_at }}</view>
					<view class="count" v-if="item.type == 2">-{{ item.balance }}</view>
					<view class="count" v-if="item.type == 1">+{{ item.balance }}</view>
					<view class="count" v-if="item.type == 3">+{{ item.balance }}</view>
				</view>
			</view>

			<!-- 加载前值为loadmore，加载中为loading，没有数据为nomore -->
			<u-loadmore :status="loadMoreStatus" nomoreText="没有更多了~" color="#999999" marginTop="38rpx" />

		</view>
	</view>
</template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow, onPullDownRefresh , onReachBottom} from '@dcloudio/uni-app'
    import {getDetailed} from "@/api/recharge";
    const currentPage = ref(1)
    const perPage = ref(10)
    // loadmore loading nomore
    const loadMoreStatus = ref('loadmore')

    const recordList = ref([])

    onLoad((evt) => {

        handleGetDetailed()
    })

    onReachBottom(() => {
        currentPage.value = 1
        handleGetDetailed()
        console.log("上拉加载更多")
    })

    const handleGetDetailed = async () => {
        const {code, data} = await getDetailed({currentPage: currentPage.value})
        if (code == 1) {
            if (data.length <= 0) {
                loadMoreStatus.value = 'nomore'
                console.log('noting')
            } else {
                currentPage.value++
                // 数量少于每页数量
                if (data.length < perPage.value) {
                    loadMoreStatus.value = 'nomore'
                } else {
                    loadMoreStatus.value = 'loadmore'
                }
            }
            recordList.value = recordList.value.concat(data)
        } else {
            loadMoreStatus.value = 'nomore'
        }

        console.log(data)
    }

</script>

<style lang="scss" scoped>
	.container {
		padding: 52rpx 26rpx;
		.list {
			padding: 32rpx 26rpx 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				margin-bottom: 24rpx;
			}

			.item {
				padding: 22rpx 0;
				border-top: 1rpx solid #999999;
				.first {
					margin-bottom: 16rpx;
				}
				.first,
				.second {
					@include between(100%);
					.sub-title {
						color: #333333;
						font-size: 30rpx;
					}
					.status {
						font-size: 28rpx;
						color: #D86C12;
					}
					.status1 {
						font-size: 28rpx;
						color: #3DBE42;
					}
					.date {
						font-size: 24rpx;
						color: #999999;
					}
					.count {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
